<!--百度圆形点层图-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>
    <BMap :mapOption="component.compConfigData.mapOption" @on-load-map-success="loadMapSuccessHandler"></BMap>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import BMapCompMixin from '@/mixin/BMapCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'BMapCirclePointComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin, BMapCompMixin],
    attr: {
      version: '1.0',
      configDataTemp: Object.assign({

        mapOption: PnDesigner.buildBMapOptionConfigData(),
        circleLayerOption: {
          type: 'wave',
          color: '#18ffff',
          size: 10,
          radius: 20,
          duration: 0.2,
          trial: 1,
          random: true,
          enablePicked: true,
          selectedColor: '#2196f3',
          circleLayerItemClickJsCode: ''
        }

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'geometry',
            remark: '必须，指定坐标等数据，例：{coordinates: [116, 39]}'
          },
          {
            field: 'properties',
            remark: '非必须，其他相关业务数据'
          },
          {
            field: 'color',
            remark: '非必须，指定颜色，权重大于组件配置表单中的配置'
          },
          {
            field: 'size',
            remark: '非必须，指定尺寸半径，权重大于组件配置表单中的配置'
          }
        ],
        ds_resultObj: [
          {
            geometry: {coordinates: [116.395645, 39.929986]},
            properties: {count: 20},
            color: '#f44336',
            size: 15
          }, {
            geometry: {coordinates: [121.487899, 31.249162]},
            properties: {count: 15}
          }, {
            geometry: {coordinates: [106.530635, 29.544606]},
            properties: {count: 41}
          }, {
            geometry: {coordinates: [112.550864, 37.890277]},
            properties: {count: 33}
          }, {
            geometry: {coordinates: [111.660351, 40.828319]},
            properties: {count: 22}
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: false, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration())
    },
    data() {
      return {
        circleLayer: null
      }
    },
    mounted() {

    },
    methods: {
      async init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {

        }, (result) => {

        });
      },

      loadMapSuccessHandler(map) {
        this.init().then(() => {
          this.map = map;

          this.view = new mapvgl.View({
            map: this.map
          });

          this.circleLayer = new mapvgl.CircleLayer({
            type: this.component.compConfigData.circleLayerOption.type,
            color: this.component.compConfigData.circleLayerOption.color,
            size: this.component.compConfigData.circleLayerOption.size,
            radius: this.component.compConfigData.circleLayerOption.radius,
            duration: this.component.compConfigData.circleLayerOption.duration,
            trial: this.component.compConfigData.circleLayerOption.trial,
            random: this.component.compConfigData.circleLayerOption.random,
            enablePicked: this.component.compConfigData.circleLayerOption.enablePicked,
            autoSelect: this.component.compConfigData.circleLayerOption.enablePicked,
            selectedColor: this.component.compConfigData.circleLayerOption.selectedColor,
            onClick: (data) => { // 点击事件
              let _this = this;
              eval(this.component.compConfigData.circleLayerOption.circleLayerItemClickJsCode)
            }
          });
          this.view.addLayer(this.circleLayer);
          this.circleLayer.setData(this.runCustomFilter(this.component.compConfigData.ds_resultObj));

          this.runCustomGlobalJsCode()
        })
      }
    },
    computed: {},
    watch: {
      'component.compConfigData.ds_resultObj': {
        handler: function (val, oldVal) {
          if (JSON.stringify(val) != JSON.stringify(oldVal)) {
            this.circleLayer.setData(this.runCustomFilter(val));
          }
        },
        deep: true
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
